{% extends 'blog/base.html' %} 
{% load static %}

{% block cate-title%}
<title> 友链 | 阿凌的猫爬架</title>
{% endblock cate-title%}

{% block load-src %}
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1962070_9o8c1iysrsu.css">
    <link rel="stylesheet" href="{% static 'blog/css/extraClass.css'%}">
    <link rel="stylesheet" href="{% static 'blog/highlight/styles/github.css'%}">
    <link rel="stylesheet" href="{% static 'blog/css/_friend_link.css'%}">

    <script type="text/javascript" src="{% static 'blog/js/jquery.js'%}"></script>
    <script type="text/javascript" src="{% static 'blog/js/iconfont.js'%}"></script>
    <script type="text/javascript" src="{% static 'blog/js/_friend_link.js'%}"></script>
{% endblock load-src %}    

{% block acticle-style %}
    <style>
    .icon {
        width: 1.5em; 
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        position: absolute;
        left: 0px ;
        top: 10px ;
        font-size: 20px ;
        cursor: pointer;
    }
    </style>
{% endblock acticle-style %}

{% block meta %}
    <div class="acticle-pic" style="background-image: url('{% static 'blog/img/indexBackground.png'%}');"></div>
{% endblock meta %}

{% block acticle-title %}
    <div class="extra-box">
        <div class="acticle-title">知君仙骨无寒暑。
            <div class="roteZInf5S">
                <svg class="icon icon-sakura-flower" aria-hidden="true">
                    <use xlink:href="#icon-sakura-flower"></use>
                </svg>
            </div>
        </div>
    </div>
{% endblock acticle-title %}

{% block main %}
    {% for friend in friend_list %}
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <img src="{{ friend.pic }}">
                    <a href="{{friend.friend_url}}" target="_blank">
                        <h3>{{friend.name}}</h3>
                    </a>
                </div>
            </div>
            <a class="face face2" href="{{friend.friend_url}}" target="_blank">
                <div class="content">
                    <p>
                        {{friend.excerpt}}
                    </p>
                </div>
            </a>
        </div>
    {% empty %}
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <img src="{% static 'blog/img/test_1.jpg' %}">
                    <a href=""><h3>-NAME-</h3></a>
                </div>
            </div>
            <div class="face face2">
                <div class="content">
                    <p>
                        -NOTHING-
                    </p>
                </div>
            </div>
        </div>
    {% endfor %}

{% endblock main %}